<template>
  <div class="modeNo-box">
    <p class="modeNo-title">
      <span>模版模式</span>
      <span class="openAll" @click="emit('emitSetMode', 1)">查看全部模板</span>
    </p>
    <div class="list">
      <div class="scroll-left" @click="templateScroll(1)">
        <i class="doorIcon">&#xe638;</i>
      </div>
      <div class="scroll-right" @click="templateScroll(2)">
        <i class="doorIcon">&#xe639;</i>
      </div>
      <div class="list-scroll" ref="scroll1">
        <div
          v-for="(item, index) in templateList"
          :key="item.id"
          class="item-parent"
          :class="{ 'item-parent-no': index === 0 }"
        >
          <div class="item-boxs" @click="emit('emitOpenInfo', item.id)">
            <div class="item-img">
              <div class="remask-box" v-if="item.typeValue">
                {{ item.typeValue }}
              </div>
              <div class="image-boxs-box">
                <img
                  v-if="!item.linkUrl"
                  :src="urls + item.coverUrl"
                  fit="cover"
                  position="center"
                  class="image-boxs"
                />
                <img v-else :src="item.coverUrl" fit="cover" position="center" class="image-boxs" />
              </div>
              <div class="item-title-box">
                <span class="title1">{{ item.name }}</span>
                <span class="title2"
                  ><img
                    v-if="item.exhibitTotal !== 0"
                    style="width: 16px; height: 16px"
                    :src="publicUrls + 'assets/img/square.svg'"
                    alt=""
                  />
                  {{ item.exhibitTotal > 999 ? '999+' : item.exhibitTotal !== 0 ? item.exhibitTotal : '' }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <p class="modeNo-title">
      <span>自由模式</span>
      <span class="openAll" @click="emit('emitSetMode', 2)">查看全部场景</span>
    </p>
    <div class="list-free">
      <div class="scroll-left" @click.stop="templateScrollFree(1)">
        <i class="doorIcon">&#xe638;</i>
      </div>
      <div class="scroll-right" @click.stop="templateScrollFree(2)">
        <i class="doorIcon">&#xe639;</i>
      </div>
      <div class="list-scroll" ref="scroll2">
        <div
          class="item-parent"
          v-for="(item, index) in freeList"
          :key="item.id"
          :class="{ 'item-parent-no': index === 0 }"
        >
          <div class="pree-item" @click="emit('emitOpenInfo', item.id)">
            <div class="pree-item-img">
              <img :src="urls + item.coverUrl" fit="cover" position="center" class="free-image-boxs" />
            </div>
            <div class="item-title-box">
              <span class="title1">{{ item.name }}</span>
              <span class="title2"
                ><img
                  v-if="item.exhibitTotal !== 0"
                  style="width: 16px; height: 16px"
                  :src="publicUrls + 'assets/img/square.svg'"
                  alt=""
                />
                {{ item.exhibitTotal > 999 ? '999+' : item.exhibitTotal !== 0 ? item.exhibitTotal : '' }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { publicUrls } from '@/utils/minxin';
import { linkurl } from '@/utils/minxin';
import { urls } from '@/utils/request/upload';
import { doortemplateList, setTemplate, templateInfo } from '@/api/templates/templates';
import { ref } from 'vue';

const emit = defineEmits(['emitSetMode', 'emitOpenInfo']);
const scroll1 = ref();
const scroll2 = ref();
const templateList = ref([]);
const freeList = ref([]);
const parmas = {
  typeId: 0,
  mode: 1,
  pageNo: 1,
  pageSize: 8,
  value: '',
};
const parmasFree = {
  typeId: 0,
  mode: 2,
  pageNo: 1,
  pageSize: 8,
  value: '',
};
const init = async () => {
  try {
    let { data } = await doortemplateList(parmas);

    templateList.value = data.data;
  } catch {}
};
const initFree = async () => {
  try {
    let { data } = await doortemplateList(parmasFree);

    freeList.value = data.data;
  } catch {}
};
const templateScroll = (type: number) => {
  // console.log('点击', scroll1.value);
  if (type === 1) {
    scroll1.value.scrollLeft = scroll1.value.scrollLeft - 396;
  } else {
    scroll1.value.scrollLeft = scroll1.value.scrollLeft + 396;
  }
};
const templateScrollFree = (type: number) => {
  // console.log('点击', scroll2.value.scrollLeft);
  if (type === 1) {
    scroll2.value.scrollLeft = scroll2.value.scrollLeft - 672;
  } else {
    scroll2.value.scrollLeft = scroll2.value.scrollLeft + 672;
  }
};

init();
initFree();
</script>

<style scoped lang="less">
@import './NoMode.less';
.modeNo-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px 24px;
}
.modeNo-title {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  font-family: PingFang SC;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  text-align: left;
  .openAll {
    cursor: pointer;
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: rgba(0, 0, 0, 0.59);
  }
  .openAll:hover {
    color: rgba(230, 43, 23, 1);
  }
}
.list {
  position: relative;
  width: 100%;
  height: calc(296px + 8px);
  margin-bottom: 30px;
  margin-top: -8px;
  .list-scroll {
    padding-top: 8px;
  }
}

.list-free {
  position: relative;
  width: 100%;
  height: 310px;
}
.list-scroll {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: auto;
  scroll-behavior: smooth;
}
.list-scroll::-webkit-scrollbar {
  display: none;
}
.scroll-left,
.scroll-right {
  cursor: pointer;
  z-index: 999;
  position: absolute;
  top: 137px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.5);

  border-radius: 50%;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);

  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.12);
  .doorIcon {
    color: rgba(0, 0, 0, 0.26);
    font-size: 16px;
  }
}
.scroll-left:hover,
.scroll-right:hover {
  background: rgba(255, 255, 255, 1);
}
.scroll-left {
  left: -12px;
}
.scroll-right {
  right: -12px;
}
.pree-item {
  width: 656px;
  height: 296px;
}
.pree-item-img {
  width: 656px;
  height: 260px;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.free-image-boxs {
  cursor: pointer;

  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 260px;
  border-radius: 6px;
}
.pree-item-img:hover {
  .free-image-boxs {
    transition: all 10s;
    left: 656px;
    transform: translateX(-100%);
  }
}
</style>
